import React, { Component } from "react";
import "./noData.scss";
/**暂无数据 */
class NoData extends Component {
	constructor(props) {
		super(props);
		this.state = {
			type: this.props.params.type ? this.props.params.type : "cover", //覆盖式cover，替换式:replaceList替换列表
			msg: this.props.params.msg ? this.props.params.msg : "暂无数据哦~",
			showBtn: this.props.params.showBtn ? this.props.params.showBtn : false,
			classNameStr:
				"no-data " +
				(this.props.params.className ? this.props.params.className : "")
		};
	}
	componentDidMount() { }
	componentWillReceiveProps(data) {
		this.setState({
			type: data.params.type,
			msg: data.params.msg,
			classNameStr:
				"no-data " + (data.params.className ? data.options.className : "")
		});
	}
	refreshAction() {
		if (this.props.params) {
			if (this.props.params.showBtn) {
				if (this.props.callback) {
					this.props.callback();
				}
			}
		} else if (this.state.showBtn) {
			if (this.props.callback) {
				this.props.callback();
			}
		}
	}
	render() {
		let { msg } = this.state;
		let style;
		switch (this.state.type) {
			case "cover":
				style = {
					position: "fixed",
					top: 0,
					left: 0,
					right: 0,
					bottom: 0,
					paddingTop: 0,
					backgroundColor: "#FFFFFF"
				};
				break;
			case "replaceList":
				style = { position: "relative" };
				break;
			default:
				break;
		}
		if (!msg) {
			msg = "暂无数据";
		}
		return (
			<div className={this.state.classNameStr} style={style}>
				<div className="no-data-top">
					<img
						className="no-data-img"
						style={
							this.state.type == "cover" ? { margin: "4rem auto 0 auto" } : {}
						}
						src={require("../../images/icon/no-data.png")}
					/>
					{msg && <div className="no-data-tips">{msg}</div>}
				</div>
				{/*
                    showBtn&&<button className="no-data-btn" onClick={this.refreshAction.bind(this)}>刷新</button>
                */}
			</div>
		);
	}
}
export default NoData;
